import React from 'react'
import { NavBar,Toast, Image,Button, Avatar, Space, Tag,List} from 'antd-mobile'
import { useLocation } from 'react-router-dom'
import { getApply } from '../../api/pet'
import { back } from '../../api/public'
import demoSrc from '../../image/cat.png'
import './index.css'
export default function PetDetail() {
  const location =  useLocation()
  //存放Home页面传进来的宠物数据
  const petInfo = location.state
  // 申请领养宠物
   const apply = () =>{
    // console.log(petInfo)
    getApply(petInfo.id).then((res)=>{console.log(res)})
    Toast.show({
      content: '申请成功',
      duration: 1000,
    })

  }
    
  return (
    <div className='pet-container'>
      <NavBar style={{backgroundColor:'#ffffff',position:'sticky',top:'0px'}} onBack={back}>萌宠领养</NavBar>
      <div style={{display: 'flex',justifyContent:'center',background:'#fff',marginTop:'5px'}}>
          <Image style={{marginTop:20}} src={petInfo.pet_avatar} width={300} height={300} fit='fill' /> 
        </div>


        <div className="pet-user" style={{textAlign:'left',backgroundColor:'#fff',padding:'10px',marginTop:'10px'}}>
          <h3>发布人</h3>
          <div style={{display:'flex'}}>
          <Avatar src={demoSrc}></Avatar>
           <div className="pet-content">
              <div style={{fontSize:'16px'}}>小明</div>
              <Space>
              <Tag color='#87d068'>爱心人士</Tag>
            </Space>
           </div>
          </div>
      </div>

      <div className="pet-info">
          <h3>宠物信息</h3>
          <div style={{display:'flex'}}>
          <Avatar src={petInfo.pet_avatar}></Avatar>
              <div style={{fontSize:'16px',marginLeft:'10px',marginTop:'8px'}}>{petInfo.name}</div>    
          </div>
          <div className='pet-info'>
            <List>
                <List.Item extra={petInfo.pet_type === 0 ? '猫' : '狗'}>
                    类型
                </List.Item>
                <List.Item extra={petInfo.pet_gender === 0 ? '弟弟' : '妹妹'}>
                    性别
                </List.Item>
                <List.Item extra={petInfo.pet_age}>
                    年龄
                </List.Item>
                <List.Item extra={petInfo.position ? petInfo.position : '重庆市'}>
                    领养位置
                </List.Item>
            </List>
          </div>
      </div>
       
   


      <div className="pet-footer">
          <Button  onClick={apply} color='primary' fill='solid' style={{width:'250px',marginLeft:'20vw'}}  block>
                申请领养
          </Button>
      </div>
    </div>
  )
}
